<script setup>
</script>
<template>
    <div id="app">
        <div class="box">
            <div class="wenzi">
                精选~房源
            </div>
            <div class="shu">
                <ul class="nav">
                    <li>朝阳</li>
                    <li>海定</li>
                    <li>昌平</li>
                    <li>丰台</li>
                    <li>大兴</li>
                    <li>东城</li>
                    <li>西城</li>
                    <li>通州</li>
                    <li>顺义</li>
                </ul>
                <span>更多</span>
            </div>
            <div class="xia">
                <div class="xiao">
                    <img src="fang.png" alt="">
                    <div class="wen1">
                        <div class="wen2">
                            <span>精装复式4居 户型方正...</span>
                            <span class="aa"> 1400万</span>
                        </div>
                        <div class="wen3">远洋天地(一期) 4室2厅|165.49m</div>
                    </div>
                </div>
                <div class="xiao">
                    <img src="fang.png" alt="">
                    <div class="wen1">
                        <div class="wen2">
                            <span>精装复式4居 户型方正...</span>
                            <span class="aa"> 1400万</span>
                        </div>
                        <div class="wen3">远洋天地(一期) 4室2厅|165.49m</div>
                    </div>
                </div>
                <div class="xiao">
                    <img src="fang.png" alt="">
                    <div class="wen1">
                        <div class="wen2">
                            <span>精装复式4居 户型方正...</span>
                            <span class="aa"> 1400万</span>
                        </div>
                        <div class="wen3">远洋天地(一期) 4室2厅|165.49m</div>
                    </div>
                </div>
                <div class="xiao">
                    <img src="fang.png" alt="">
                    <div class="wen1">
                        <div class="wen2">
                            <span>精装复式4居 户型方正...</span>
                            <span class="aa"> 1400万</span>
                        </div>
                        <div class="wen3">远洋天地(一期) 4室2厅|165.49m</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<style scoped>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.box {
    width: 1200px;
    margin: 0 auto;
    height: 400px;
    border: 1px solid #ccc;
    background-color: rgb(252, 248, 248);
}

.wenzi {
    text-align: center;
    font-weight: bold;
    font-size: 30px;
}

.shu {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
}

.nav {
    display: flex;
    list-style: none;
    gap: 20px;
    margin-left: 20px;
}

.nav li {
    width: 80px;
    height: 30px;
    text-align: center;
    border: 1px solid #ccc;
    font-size: 16px;
}

.nav li:hover {
    background-color: green;
}

.shu span {
    margin-right: 2%;
    width: 80px;
    height: 30px;
    text-align: center;
    border: 1px solid #ccc;
    font-size: 16px;
}

.shu span:hover {
    background-color: green;
}
.xia{
    margin: 20px;
    display: flex;
    gap: 20px;
}
.xiao {
    display: flex;
    flex-direction: column;
}

img {
    width: 270px;
    height: 200px;
}

.wen1 {
    display: flex;
    flex-direction: column;
    width: 270px;
    height: 50px;
    background-color: white;
}

.wen2 {
    display: flex;
    justify-content: space-between;
}

.aa {
    color: red;
}

.wen3 {
    color: #ccc;
    font-size: 16px;
}
</style>